$(function() {
	var sWidth = $(".banner").width();
	var len = $(".banner ul li").length;
	var index = 0;
	var picTimer;
	
	var btn = '<table cellpadding="0" cellspacing="5px"><tr>';
	for(var i=0; i < len; i++) {
		btn += "<td><div></div></td>";
	}
	btn += "</tr></table>";
	$(".btn").append(btn);
	$(".banner").append("<div class='preNext pre'></div><div class='preNext next'></div>");

	$(".btn div").css("opacity",0.4).mouseenter(function() {
		index = $(".btn div").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	$(".banner .preNext").css("opacity",0.2).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},300);
	});

	$(".banner .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	$(".banner .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	$(".banner ul").css("width",sWidth * (len));
	
	$(".banner").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},3000); 
	}).trigger("mouseleave");
	
	function showPics(index) { 
		var nowLeft = -index*sWidth; 
		$(".banner ul").stop(true,false).animate({"left":nowLeft},300); 
		$(".btn div").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); 
	}
});